<template>
  <div>
    <el-card shadow="always" v-for="(item,index) in responseBookDetail.data" :key="index">
      <div class="book-content">
        <div class="book-l">
          <p>医院名称: {{ item.hospitalName }}</p>
          <span class="doctor-name">医生名称: {{ item.doctorName }}</span>
          <span>科室: {{ item.department }}</span>
        </div>
        <div class="book-r">
          <span class="span-day">{{ item.day }}</span>
          <span class="span-time">{{ item.startTime }} - {{ item.endTime }}</span>
          <span class="span-status" :style="getStatusColor(item.status)">{{ getStatus(item.status) }}</span>
          <span class="span-rank">排号:{{ item.rank }}</span>
          <div style="width: 80px;">
            <el-link class="link-cancel" type="danger" :underline="false" v-if="!cancelButton[index]"
                     @click="openDelete(item.hospitalUuid,item.doctorUuid,item.detailUuid,item.orderUuid)">取消预约</el-link>
            <el-link class="link-cancel" type="primary" :underline="false" v-if="!detailButton[index]"
                     @click="showDetail(item.orderUuid)">查看详情</el-link>
          </div>
        </div>
      </div>
    </el-card>
    <el-empty description="没有预约信息" v-if="responseBookDetail.data.length === 0"></el-empty>
    <div class="block">
      <el-pagination
        background
        @current-change="handleCurrentChange"
        :current-page.sync="responseBookDetail.currentPage"
        :page-sizes="[responseBookDetail.pageSize]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="responseBookDetail.total">
      </el-pagination>
    </div>

    <el-dialog
      title="预约详情"
      :visible.sync="dialogVisible"
      width="70%">
      <h3>问诊记录</h3>
      <div style="margin-left: 15px">
        <h4>症状描述</h4>
        <el-card style="padding: 15px;background-color: rgba(192, 214, 149,0.4)">
          <span v-if="responseRecord.userStatus === 1">{{responseRecord.userDescription}}</span>
          <p style="font-weight: bold;font-size: 18px;color: #e66767" v-if="responseRecord.userStatus === 2">禁止查看</p>
        </el-card>
        <h4>医生诊断</h4>
        <el-card style="padding: 15px;background-color: rgba(192, 214, 149,0.4)">
          <span v-if="responseRecord.doctorStatus === 1">{{responseRecord.doctorDescription}}</span>
          <p style="font-weight: bold;font-size: 18px;color: #e66767" v-if="responseRecord.doctorStatus === 2">禁止查看</p>
        </el-card>
      </div>
      <h3>药方单</h3>
      <div style="margin-left: 15px">
        <h4>中药</h4>
        <el-card style="padding: 15px;background-color: rgba(224, 86, 253,0.1)">
          <el-card style="padding: 10px;background-color: rgba(255, 247, 153,0.8)">
            <div style="display: flex">
              <div>
                <el-tag
                  :key="index"
                  v-for="(item,index) in prescription.eastMedical.hospitalHave"
                  :disable-transitions="false"
                  style="margin-left: 10px;">
                  {{item.medicalName}}  {{item.count}}{{ optionsInMedicalManageUnit.filter(items => items.value ===  parseInt(item.medicalUnit)).length > 0 ?
                  optionsInMedicalManageUnit.filter(items => items.value === parseInt(item.medicalUnit))[0].label : undefined }}
                </el-tag>
              </div>
              <div>
                <el-tag
                  style="margin-left: 10px"
                  :key="index"
                  v-for="(item,index) in prescription.eastMedical.hospitalHaveNot"
                  :disable-transitions="false">
                  {{item.medicalName}}  {{item.count}}{{ optionsInMedicalManageUnit.filter(items => items.value ===  parseInt(item.unit)).length > 0 ?
                  optionsInMedicalManageUnit.filter(items => items.value === parseInt(item.unit))[0].label : undefined }}
                </el-tag>
              </div>
            </div>
          </el-card>
          <p style="font-size: 16px">副数: <span style="font-weight: bold"> {{ prescription.eastMedical.count }} </span> 副</p>
          <p style="font-size: 16px">服用详情: <span style="font-weight: bold"> {{ prescription.eastMedical.description }} </span></p>
        </el-card>
        <h4>中成/西药</h4>
        <el-card style="padding: 15px;background-color: rgba(213, 235, 225,0.8)">
          <div style="display: flex">
            <div>
              <el-tag
                style="margin-left: 10px;margin-bottom: 10px"
                :key="index"
                v-for="(item,index) in prescription.westMedical.hospitalHave"
                :disable-transitions="false">
                {{item.medicalName}}  {{item.count}}{{ optionsInMedicalManageUnit.filter(items => items.value ===  parseInt(item.medicalUnit)).length > 0 ?
                optionsInMedicalManageUnit.filter(items => items.value === parseInt(item.medicalUnit))[0].label : undefined }}
                {{item.description}}
              </el-tag>
            </div>
            <div>
              <el-tag
                style="margin-left: 10px"
                :key="index"
                v-for="(item,index) in prescription.westMedical.hospitalHaveNot"
                :disable-transitions="false">
                {{item.medicalName}}  {{item.count}}{{ optionsInMedicalManageUnit.filter(items => items.value ===  parseInt(item.unit)).length > 0 ?
                optionsInMedicalManageUnit.filter(items => items.value === parseInt(item.unit))[0].label : undefined }}
                {{item.description}}
              </el-tag>
            </div>
          </div>
        </el-card>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {getBookDetail, deleteBook} from '../api/userApi'
import {prescriptionBookUuid, recordBookUuid} from '../api/DoctorApi'
export default {
  name: 'UserBook',
  computed: {
    getStatus () {
      return (status) => {
        switch (status) {
          case 1:
            return '已预约'
          case 2:
            return '已确认'
          case 3:
            return '叫号中'
          case 4:
            return '进行中'
          case 5:
            return '已完成'
        }
      }
    }
  },
  data () {
    return {
      prescription: {
        eastMedical: {
          hospitalHave: [
            // {
            //   medicalUnit: undefined,
            //   medicalName: undefined,
            //   medicalUuid: undefined,
            //   count: undefined
            // }
          ],
          hospitalHaveNot: [
            // {
            //   medicalName: undefined,
            //   count: undefined,
            //   unit: undefined
            // }
          ],
          description: undefined, // 怎么吃
          count: undefined// 几副
        },
        westMedical: {
          hospitalHave: [
            // {
            //   medicalUnit: undefined,
            //   medicalName: undefined,
            //   medicalUuid: undefined,
            //   count: undefined,
            //   description: undefined
            // }
          ],
          hospitalHaveNot: [
            // {
            //   medicalName: undefined,
            //   count: undefined,
            //   unit: undefined,
            //   description: undefined
            // }
          ]
        }
      },
      dialogVisible: false,
      cancelButton: [],
      detailButton: [],
      responseBookDetail: {
        currentPage: undefined,
        pageSize: undefined,
        lastPage: undefined,
        total: undefined,
        data: []
      },
      requestBookDetail: {
        status: undefined,
        currentPage: 1,
        pageSize: 6
      },
      responseRecord: {
        recordUuid: undefined,
        bookUuid: undefined,
        userDescription: undefined,
        userStatus: undefined,
        doctorDescription: undefined,
        doctorStatus: undefined
      },
      responsePrescription: {
        prescriptionUuid: undefined,
        bookUuid: undefined,
        prescription: undefined
      },
      optionsInMedicalManageUnit: [{
        value: 1,
        label: '盒'
      }, {
        value: 2,
        label: '瓶'
      }, {
        value: 3,
        label: '袋'
      }, {
        value: 4,
        label: '克'
      }, {
        value: 5,
        label: '支'
      }, {
        value: 6,
        label: '粒'
      }]
    }
  },
  mounted () {
    this.getUserBook([1, 2, 3, 4, 5])
  },
  methods: {
    showDetail (orderUuid) {
      this.dialogVisible = true
      recordBookUuid({
        bookUuid: orderUuid
      }).then((res) => {
        if (res.code === 200) {
          this.responseRecord = res.data
        }
      })
      prescriptionBookUuid({
        bookUuid: orderUuid
      }).then((res) => {
        if (res.code === 200) {
          this.responsePrescription = res.data
          this.prescription = JSON.parse(this.responsePrescription.prescription)
        }
      })
    },
    openDelete (hospitalUuid, doctorUuid, detailUuid, orderUuid) {
      this.$confirm('此操作将取消该订单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.cancelBook(hospitalUuid, doctorUuid, detailUuid, orderUuid)
      })
    },
    cancelBook (hospitalUuid, doctorUuid, detailUuid, orderUuid) {
      deleteBook({
        hospitalUuid: hospitalUuid,
        doctorUuid: doctorUuid,
        detailUuid: detailUuid,
        orderUuid: orderUuid,
        isLevelChange: 1
      }).then((res) => {
        if (res.code === 200) {
          this.getUserBook()
          this.$message.success('取消预约成功')
        }
      })
    },
    // 获取状态的颜色
    getStatusColor (status) {
      switch (status) {
        case 1:
          return 'color: #1e90ff'
        case 2:
          return 'color: #ff6b81'
        case 3:
          return 'color: #ffa502'
        case 4:
          return 'color: #8c7ae6'
        case 5:
          return 'color: #2ed573'
      }
    },
    getUserBook (param) {
      if (param === null) {
        param = this.requestBookDetail.status
      } else {
        this.requestBookDetail.status = param
      }
      getBookDetail({
        status: param,
        currentPage: this.requestBookDetail.currentPage,
        pageSize: this.requestBookDetail.pageSize
      }).then((res) => {
        if (res.code === 200) {
          this.responseBookDetail.currentPage = res.data.currentPage
          this.responseBookDetail.pageSize = res.data.pageSize
          this.responseBookDetail.lastPage = res.data.lastPage
          this.responseBookDetail.total = res.data.total
          this.responseBookDetail.data = res.data.data
          this.cancelButton = []
          this.detailButton = []
          this.responseBookDetail.data.map((item) => {
            if (item.status !== 1) {
              this.cancelButton.push(true)
            } else {
              this.cancelButton.push(false)
            }
            if (item.status !== 5) {
              this.detailButton.push(true)
            } else {
              this.detailButton.push(false)
            }
          })
        }
      })
    },
    handleCurrentChange (val) {
      this.requestBookDetail.currentPage = val
      this.getUserBook()
    }
  }
}
</script>

<style lang="less" scoped>

.el-card {
  margin-bottom: 20px;
}

.book-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .book-l {
    margin-left: 15px;
    margin-top: -10px;
    .doctor-name {
      margin-right: 30px;
    }
  }
  .book-r{
    display: flex;
    .span-status {
      width: 100px;
      font-size: 18px;
      font-weight: bold;
    }
    .span-time {
      width: 150px;
      font-size: 18px;
      color: #807f7f;
    }
    .span-day {
      width: 150px;
      font-size: 18px;
      color: #807f7f;
    }
    .span-rank{
      width: 100px;
      font-size: 18px;
      font-weight: bold;
      color: #428a88;
    }
    .link-cancel {
      font-size: 18px;
      font-weight: bold;
    }
  }
}
.block {
  margin-top: 20px;
}
</style>
